<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title id="title">商品列表</title>
		<script src="../js/mui.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />		
		<link rel="stylesheet" href="../css/picker.css" />
		<link rel="stylesheet" href="../css/poppicker.css" />
		<link rel="stylesheet" type="text/css" href="../css/datepicker3.css" />
		<script src="../plugin/crop/croppie.min.js"></script>
		<link rel="stylesheet" href="../css/font-awesome.min.css" />
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<link rel="stylesheet" href="../css/style.css" />
		<link rel="stylesheet" href="../css/css.css" />

	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title" id="top_title">商品分类</h1>
			<a onclick="select()" class="mui-icon mui-icon-search" style="float: right;"></a>
		</header>
		<div class="mui-content" style="height: 100%;">
			<ul class="goods_list" id="content">
				<li>
					<a href="#" class="clearfix">
						<div class="goods_img"><img src="http://n1.073586.com/public/uploads/images/20170708/1499519090_912356.jpg"></div>
						<div class="goods_lisright">
							<p class="goods_name">青椒</p>
							<p class="goods_sj">商家：世平家庭农场</p>
							<p class="goods_sjbox clearfix">
								<span class="goods_fl">分类：种植</span>
								<span class="goods_time">2017-07-17</span>
							</p>
						</div>
					</a>
				</li>
			</ul>
		</div>
		<div class="mui-content" id="selected" style="display: none;">
			<div class="gerenzl_nr">
				<form class="mui-input-group gerenzl_group">
					<div class="gerenzl_top img-click">

						<div class="mui-input-row">
							<label>开售开始时间</label>
							<!--<input type="text"  name="birthday" id="birthday" class="datetimepicker" id="datetimepicker">-->
							<input type="text" id="sctime1" class="datetimepicker" id="datetimepicker">
						</div>
						<div class="mui-input-row">
							<label>开售结束时间</label>
							<!--<input type="text"  name="birthday" id="birthday" class="datetimepicker" id="datetimepicker">-->
							<input type="text" id="sctime2" class="datetimepicker" id="datetimepicker">
						</div>
						<div class="mui-input-row">
							<label>分类：</label>
							<select id='type' onchange="func(this.value)">
								<option value="">请选择分类</option>
							</select>
						</div>
						<div class="mui-input-row">
							<label>子分类：</label>
							<select id='ztype'>
								<option value=''>请选择分类</option>
							</select>
						</div>
					</div>
					<div class="mui-input-row">
						<label>生产者</label>
						<input type="text" id="shop" class="mui-input-group" placeholder="请输入店铺名">
					</div>
					<div class="mui-input-row">
						<label>区域</label>
						<input type="text" id="district" readonly="readonly" class="mui-input-group" placeholder="请选择地区">
					</div>

				</form>
				<div style="height: auto;" onclick="go()">
					<span>确定</span>
				</div>
			</div>

		</div>
		<div id="footer"></div>
		<div id="allmap"></div>

	</body>

</html>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/app.js" type="text/javascript"></script>
<script type="text/javascript" src="../js/castapp.js"></script>
<script type="text/javascript" src="../js/layer/layer.min.js"></script>
<script src="../js/app.js"></script>
<script type="text/javascript" src="../js/bootstrap-datepicker.js"></script>
<script src="../js/picker.js"></script>
<script src="../js/poppicker.js"></script>
<script src="../js/city.data-3.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script type="text/javascript">
	getFoot(getUrlParam("foot_active") > 0 ? getUrlParam("foot_active") : 3);
	get_navigation();
	var loading = layer.load(0, {
		shade: false,
		time: 1 * 1000
	});
</script>
<script>
	//底部加载事件
	$(window).scroll(function() {
		var a = $(document).scrollTop();
		var b = $(document).height() - $(window).height();

		if($(document).scrollTop() + 1 >= $(document).height() - $(window).height()) {
			var total_num = $("#total_num").val();
			var per_page = $("#per_page").val();
			var page_total = Math.ceil(parseInt(total_num) / parseInt(per_page));
			var cut_page = $("#cut_page").val();

			if(cut_page < page_total) {
				$("#cut_page").val(parseInt(cut_page) + 1);
				get_goods_list();
			} else {
				layer.msg("已到底部");
			}
		}
	});
</script>
<script>
	//及时获取子分类
	function func(val) {
		$('#ztype').empty();
		$('#ztype').show();
		$.ajax({
			type: "post",
			url: APP.api_url + "goods/get_type",
			data: {
				id: val
			},
			dataType: 'jsonp',
			success: function(data) {
				if(data.code == 200) {
					var type = data.list;
					for(var i = 0; i < type.length; i++) {
						$('#ztype').append('<option  value=' + type[i]['id'] + '>' + type[i]['typename'] + '</option>');
					}
				} else {
					$('#ztype').hide();
				}
			},

		});
	}
	//获取分类
	$.ajax({
		type: "post",
		url: APP.api_url + "goods/get_type",
		data: {},
		dataType: 'jsonp',
		success: function(data) {
			var type = data.list;
			for(var i = 0; i < type.length; i++) {
				$('#type').append('<option  value=' + type[i]['id'] + '>' + type[i]['typename'] + '</option>');
			}

		},

	});
	$(function() {
		$(".datetimepicker").datepicker({
			language: "zh-CN",
			autoclose: true, //选中之后自动隐藏日期选择框
			clearBtn: true, //清除按钮
			todayBtn: true, //今日按钮
			format: "yyyy-mm-dd" //日期格式，详见 http://bootstrap-datepicker.readthedocs.org/en/release/options.html#format
		});
		$('#upload').on('change', function() {
			readFile(this, "thumb", 1);
			$(".file-btn").hide();
		});

	});
	//获取搜索内容
	function go() {
		$.ajax({
			//type: 'post',
			url: APP.api_url + 'goods/select',
			data: {
				sctime1: $('#sctime1').val(),
				sctime2: $('#sctime2').val(),
				type: $('#type').val(),
				ztype: $('#ztype').val(),
				district: $('#district').val(),
				shop: $('#shop').val()
			},
			dataType: 'jsonp',
			success: function(data) {
				if(data.code == 200) {
					var list = data.data;
					var strs = new Array(); //定义一数组 
					var goods_htm = '';
					if(list.length != 0) {
						for(var i = 0; i < list.length; i++) {
							strs = list[i]['content'].split("@"); //获取首图 	
							goods_htm += '<li><a href="goodshow.html?goods_id=' + list[i].id + '" class="clearfix">'+
							'<div class="goods_img"><img src="' + APP.pic_url + strs[0] + '" /></div>'+
							'<div class="goods_lisright"><p class="goods_name">'+ list[i].goods_name +'</p>'+
							'<p class="goods_sj">商家：'+ list[i].shop_name +'</p>'+
							'<p class="goods_sjbox clearfix"><span class="goods_fl">分类：'+ list[i].type + '</span>'+
							'<span class="goods_time">'+ list[i].sctime +'</span></p></div></a></li>';
						}
						goods_htm += '<div style="height:60px;width: 100%;float:left;"></div>';
					} else {
						goods_htm += '<img src="../images/qq1.png" />';
					}
					$("#content").empty();
					$("#content").append(goods_htm);
					$('#selected').hide();
					$('#content').show();

				} else {
					layer.msg('找不到相关信息的商品');
				}

			}
		})
	}

	//地址
	ca.init();

	var input = ca.tagName('input');
	var dis = ca.id('district');
	dis.addEventListener('tap', function() {
		castapp.combinationSelect(3, cityData3, function(arr) {
			dis.value = arr;
		});
	})
</script>
<script>
	//搜索
	function select() {
		$("#content").hide();
		$("#selected").show();
	}

	function clier() {
		$("#cut_page").val(1);
	}
</script>
<script>
	var goods = getUrlParam('data');
	//获取商品列表
	$.ajax({
		//type: 'post',
		url: APP.api_url + 'goods/get_goodslist',
		data: {},
		dataType: 'jsonp',
		success: function(data) {
			if(data.code == 200) {
				var json = data.list;
				var goods_htm = '';
				for(var i = 0; i < json.length; i++) {
					var strs = json[i]['content'].split("@"); //获取首图 		
					goods_htm += '<a href="goodshow.html?goods_id=' + json[i].id + '" ><div class="mui-card-header mui-card-media">' +
						'<img src="' + APP.pic_url + strs[0] + '" />' +
						'<div class="mui-media-body" style="width:50%;">' + json[i].goods_name + '<p>上市时间 ' + json[i].sctime + '</p></div><div style="float:right;width:48%;color:#111111;margin-top:-40px; font-size:14px;">商家：' + json[i].shop_name + '</div><div style="float:right;color:#111111;width:48%;margin-top:-16px;font-size:12px;">分类：' + json[i].type + '</div></div></a>';
				}
				goods_htm += '<div style="height:60px;width: 100%;float:left;"></div>';
				$("#content").append(goods_htm);
				//									$('#content').style("background-color","red")
				//					alert(document.getElementById('content').style.background-color);
			}

		}
	})
</script>